import 'package:flutter/material.dart';
import 'package:provide/provide.dart';
import '../provide/pdt_detail.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class PdtDetailPage extends StatefulWidget {
  final String code;
  final String title;
  PdtDetailPage({@required this.title,@required this.code});
  _PdtDetailPage createState() => _PdtDetailPage();
}

class _PdtDetailPage extends State<PdtDetailPage> {
  @override
  void initState() {
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: false);
    return Scaffold(
      appBar: AppBar(title: Text('商品详情')),
      body: FutureBuilder(
        future: _getInfo(context),
        builder: (context,snapshot){
          if(snapshot.hasData){
            var pdtDetail = Provide.value<PdtDetailProvide>(context).pdtDetail;
            if(pdtDetail != null){
              return Container(
                color: Color.fromRGBO(245, 245, 245, 1),
                child: Stack(
                    children: <Widget>[
                      ListView(
                        children: <Widget>[
                          SwiperDiy(),
                          ProductTopInfoDiy(),
                          SpecificaDiy(),
                          LogisticsTipsDiy(),
                          RecommendProductDiy(),
                          BottomImages(),
                        ],
                      ),
                      Positioned(
                        bottom: 0,
                        left: 0,
                        child: DetailsBottom()
                      )
                    ],
                  )
              );
            }
          }else{
            return Text('加载中........');
          }
        },
      ) 
    );
  }
  Future _getInfo(BuildContext context)async{
    try {
      await Provide.value<PdtDetailProvide>(context).getProductDetail(widget.code);
      await Provide.value<PdtDetailProvide>(context).getRecommendProducts(widget.code);
    } catch (e) {
      print(e);
    }
    return '完成加载';
  }
}

class SwiperDiy extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    var pdtDetail = Provide.value<PdtDetailProvide>(context).pdtDetail;
    var productDetail = pdtDetail.productDetail;
    var swiperData = productDetail.images;
    return Container(
      width: ScreenUtil().setWidth(750),
      height: ScreenUtil().setHeight(750),
      child: Swiper(
        itemBuilder: (BuildContext context,int index){
          return InkWell(
            onTap: (){

            },
            child: Image.network("${swiperData.url}",fit:BoxFit.fill)
          );
         
        },
        itemCount: 1,
        pagination: new SwiperPagination(),
        autoplay: true,
      ),
    );
  }
}

class ProductTopInfoDiy extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    var pdtDetail = Provide.value<PdtDetailProvide>(context).pdtDetail;
    var productDetail = pdtDetail.productDetail;
    return Container(
      width: ScreenUtil().setWidth(750),
      padding: EdgeInsets.fromLTRB(ScreenUtil().setSp(27), ScreenUtil().setSp(48), ScreenUtil().setSp(25), ScreenUtil().setSp(35)),
      margin: EdgeInsets.only(bottom: ScreenUtil().setSp(20)),
      decoration: BoxDecoration(color: Colors.white),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(bottom: ScreenUtil().setSp(37)),
            child:Row(
              textBaseline:TextBaseline.alphabetic,
              children: <Widget>[
                Text(
                  '¥',
                  style:TextStyle(fontSize: ScreenUtil().setSp(34),height: 1,color: Color.fromRGBO(237, 23, 76, 1))
                ),
                Text(
                  '${productDetail.price.value}',
                  style:TextStyle(fontSize: ScreenUtil().setSp(50),height: 1,color: Color.fromRGBO(237, 23, 76, 1))
                )],
              )
          ),
          Stack(
            children: <Widget>[
              Container(
                width: double.infinity,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      '${productDetail.name}',
                      style:TextStyle(fontSize: ScreenUtil().setSp(36),height: 1,color: Color.fromRGBO(34, 34, 34, 1))
                    ),
                    Container(
                      margin:EdgeInsets.only(top: ScreenUtil().setSp(18)),
                      child:Text(
                        '${productDetail.salesTerminology}',
                        style:TextStyle(fontSize: ScreenUtil().setSp(28),height: 1,color: Color.fromRGBO(136, 136, 136,1))
                      ),
                    )
                  ],
                )
              ),
              Positioned(child: Image.asset('images/share_btn.png',width:ScreenUtil().setSp(170),fit:BoxFit.contain),left: ScreenUtil().setSp(528), top: ScreenUtil().setSp(0),)
            ]
          ),
          Container(
            width: double.infinity,
            margin: EdgeInsets.only(top: ScreenUtil().setSp(36)),
            padding: EdgeInsets.only(left: ScreenUtil().setSp(100),right: ScreenUtil().setSp(67)),
            child:Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Icon(IconData(0xe656,fontFamily: "iconfont"),size: ScreenUtil().setSp(28),color: Color.fromRGBO(136, 136, 136, 1)),
                    Container(
                      margin: EdgeInsets.only(left: ScreenUtil().setSp(10)),
                      child: Text('月销${pdtDetail.salesTotal}',style: TextStyle(fontSize: ScreenUtil().setSp(24),height: 1,color: Color.fromRGBO(136, 136, 136, 1)),)
                    )
                  ],
                ),
                Container(
                  // margin: EdgeInsets.only(left: ScreenUtil().setSp(220)),
                  child: Row(
                    children: <Widget>[
                      Icon(IconData(0xe654,fontFamily: "iconfont"),size: ScreenUtil().setSp(28),color: Color.fromRGBO(136, 136, 136, 1)),
                      Container(
                        margin: EdgeInsets.only(left: ScreenUtil().setSp(10)),
                        child: Text('${pdtDetail.favTotal}人已收藏',style: TextStyle(fontSize: ScreenUtil().setSp(24),height: 1,color: Color.fromRGBO(136, 136, 136, 1)),)
                      )
                    ],
                  ),
                )
              ],
            )
          )
        ],
      ),
    );
  }
}

class SpecificaDiy extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var pdtDetail = Provide.value<PdtDetailProvide>(context).pdtDetail;
    var productDetail = pdtDetail.productDetail;
    return Container(
      decoration: BoxDecoration(color: Colors.white),
      margin: EdgeInsets.only(bottom: ScreenUtil().setSp(20)),
      padding: EdgeInsets.fromLTRB(ScreenUtil().setSp(27), ScreenUtil().setSp(37), ScreenUtil().setSp(27), ScreenUtil().setSp(37)),
      child:Row(
        children: <Widget>[
          Text(
            '已选',
            style: TextStyle(fontSize: ScreenUtil().setSp(28),height: 1, color: Color.fromRGBO(136, 136, 136, 1))
          ),
          Expanded(
            child: Container(
              margin: EdgeInsets.only(left: ScreenUtil().setSp(30)),
              child: Text(
                '${productDetail.productAttributes[0].attributeValue}，编号${productDetail.code}',
                style: TextStyle(fontSize: ScreenUtil().setSp(28),height: 1, color: Color.fromRGBO(34, 34, 34, 1))
              )
            ),
          ),
          Opacity(
            opacity: 0.7,
            child:Icon(IconData(0xe643,fontFamily: "iconfont"),size: ScreenUtil().setSp(26),color: Color.fromRGBO(136, 136, 136, 1))
          )
        ],
      )
    );
  }
}

class LogisticsTipsDiy extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Colors.white),
      margin: EdgeInsets.only(bottom: ScreenUtil().setSp(20)),
      padding: EdgeInsets.only(left: ScreenUtil().setSp(37), top: ScreenUtil().setSp(32), bottom: ScreenUtil().setSp(32)),
      child: Row(
        children: <Widget>[
          Image.asset('images/logistics_icon.png',width: ScreenUtil().setSp(36),),
          Container(
            margin: EdgeInsets.only(left: ScreenUtil().setSp(40)),
            child: Row(
              children: <Widget>[
                Text('京东物流'),
                ClipOval(
                  child:Container(
                    width: ScreenUtil().setSp(6),
                    height: ScreenUtil().setSp(6),
                    margin: EdgeInsets.only(left: ScreenUtil().setSp(14), right: ScreenUtil().setSp(16)),
                    color: Color.fromRGBO(237, 26, 78, 1)
                  )
                ),
                Text('单件包邮'),
                ClipOval(
                  child:Container(
                    width: ScreenUtil().setSp(6),
                    height: ScreenUtil().setSp(6),
                    margin: EdgeInsets.only(left: ScreenUtil().setSp(14), right: ScreenUtil().setSp(16)),
                    color: Color.fromRGBO(237, 26, 78, 1)
                  )
                ),
                Text('售后无忧'),
              ]
            ),
          )
        ]
      ),
    );
  }
}

class RecommendProductDiy extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var recommendProducts = Provide.value<PdtDetailProvide>(context).recommendProducts;
    var list = recommendProducts.list;

    return Container(
      color: Colors.white,
      padding: EdgeInsets.only(bottom: ScreenUtil().setSp(30)),
      margin: EdgeInsets.only(bottom: ScreenUtil().setSp(20)),
      child: Column(
        children: <Widget>[
          Container(
            padding: EdgeInsets.fromLTRB(ScreenUtil().setSp(27), ScreenUtil().setSp(29), 0, ScreenUtil().setSp(29)),
            alignment: Alignment.centerLeft,
            child: Text(
              '相关推荐',
              style: TextStyle(fontSize: ScreenUtil().setSp(32),height: 1, color: Color.fromRGBO(34, 34, 34, 1)),
            ),
          ),
          Container(
            padding: EdgeInsets.only(left: ScreenUtil().setSp(26)),
            height: ScreenUtil().setHeight(428),
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: list.length,
              itemBuilder: (BuildContext context,int index){
                final product = list[index];

                return ProductBox(product: product);
              }
            ),
          )
        ],
      ),
    );
  }
}

class ProductBox extends StatelessWidget {
  final product;
  ProductBox({Key key,this.product}) : super(key:key);
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(ScreenUtil().setSp(13), ScreenUtil().setSp(12), ScreenUtil().setSp(13), ScreenUtil().setSp(24)),
      margin: EdgeInsets.only(right: ScreenUtil().setSp(20)),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.all(Radius.circular(ScreenUtil().setSp(8))),
        boxShadow: [
          BoxShadow(
            color: Color.fromRGBO(0, 0, 0, 0.1),
            offset: Offset(0, 0), //阴影xy轴偏移量
            blurRadius: ScreenUtil().setSp(10), //阴影模糊程度
            spreadRadius: 0 //阴影扩散程度 
          )
        ]
      ),
      child: Column(
        // mainAxisAlignment:MainAxisAlignment.start,
        children: <Widget>[
          Container(
            width: ScreenUtil().setWidth(240),
            height: ScreenUtil().setHeight(240),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(ScreenUtil().setSp(6))),
              image: DecorationImage(image: NetworkImage('${product.images.url}'),fit: BoxFit.fill)
            ),
          ),
          Container(
            //margin: EdgeInsets.only(top: ScreenUtil().setSp(12), bottom: ScreenUtil().setSp(24)),
            width: ScreenUtil().setWidth(220),
            height: ScreenUtil().setHeight(76),
            margin: EdgeInsets.only(bottom: ScreenUtil().setSp(24)),
            alignment: Alignment.centerLeft,
            child: Text(
              '${product.name}',
              textAlign: TextAlign.left,
              maxLines: 2,
              style: TextStyle(fontSize: ScreenUtil().setSp(30),height: 1.26,color: Color.fromRGBO(34,34,34,1)),
            ),
          ),
          Container(
            width: ScreenUtil().setWidth(223),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Text(
                      '¥',
                      style: TextStyle(fontSize: ScreenUtil().setSp(24),color: Color.fromRGBO(237,23,76,1)),
                    ),
                    Text(
                      '${product.price.value}',
                      style: TextStyle(fontSize: ScreenUtil().setSp(28),color: Color.fromRGBO(237,23,76,1)),
                    )
                  ]
                ),
                Icon(IconData(0xe632,fontFamily: "iconfont"),size: ScreenUtil().setSp(25),color: Color.fromRGBO(34,34,34,1))
              ]
            ),
          )
        ],
      ),
    );
  }
}

class BottomImages extends StatelessWidget {
  final image_list = ['https://mall-resource.amwaynet.com.cn/accl_pdp_images/24373/24373M_01.jpg',
  'https://mall-resource.amwaynet.com.cn/accl_pdp_images/24373/24373M_02.jpg',
  'https://mall-resource.amwaynet.com.cn/accl_pdp_images/24373/24373M_03.jpg',
  'https://mall-resource.amwaynet.com.cn/accl_pdp_images/24373/24373M_04.jpg',
  'https://mall-resource.amwaynet.com.cn/accl_pdp_images/24373/24373M_05.jpg',
  'https://mall-resource.amwaynet.com.cn/accl_pdp_images/24373/24373M_06.jpg',
  'https://mall-resource.amwaynet.com.cn/accl_pdp_images/24373/24373M_07.jpg',
  'https://mall-resource.amwaynet.com.cn/accl_pdp_images/24373/24373M_08.jpg'];
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(ScreenUtil().setSp(26), ScreenUtil().setSp(60), ScreenUtil().setSp(26), ScreenUtil().setSp(100)),
      // height: ScreenUtil().setSp(900),
      color: Colors.white,
      child: ListView.builder(
        // itemExtent: 50,
        shrinkWrap:true,
        physics: NeverScrollableScrollPhysics(),
        itemCount: image_list.length,
        itemBuilder: (BuildContext context,int index){
          return Container(
            width: double.infinity,
            child: Image.network(
              image_list[index],
              fit: BoxFit.fitWidth,
            ),
          );
        },
      ),
    );
  }
}


class DetailsBottom extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: ScreenUtil().setWidth(750),
      height: ScreenUtil().setHeight(100),
      padding: EdgeInsets.only(left: ScreenUtil().setSp(31), right: ScreenUtil().setSp(11)),
      color: Colors.white,
      child: Row(
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(right: ScreenUtil().setSp(20)),
            width: ScreenUtil().setWidth(90),
            height: ScreenUtil().setHeight(78),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Icon(IconData(0xe632,fontFamily: "iconfont"),size: ScreenUtil().setSp(34),color: Color.fromRGBO(34,34,34,1)),
                Text('购物车')
              ]
            ),
          ),
          Container(
            width: ScreenUtil().setWidth(78),
            height: ScreenUtil().setHeight(78),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Icon(IconData(0xe633,fontFamily: "iconfont"),size: ScreenUtil().setSp(34),color: Color.fromRGBO(34,34,34,1)),
                Text('分类')
              ]
            ),
          ),
          Expanded(
            child: Container(
              margin: EdgeInsets.only(left: ScreenUtil().setSp(40)),
              child: Row(
                children: <Widget>[
                  Container(
                    width: ScreenUtil().setWidth(236),
                    height: ScreenUtil().setHeight(80),
                    decoration: BoxDecoration(borderRadius: BorderRadius.only(topLeft: Radius.circular(ScreenUtil().setHeight(2)),bottomLeft: Radius.circular(ScreenUtil().setHeight(2)))),
                    child:RaisedButton (
                      child: Text('立即购买'),
                      color: Color.fromRGBO(253,231,237,1),
                      textColor: Color.fromRGBO(237,23,76,1),
                      onPressed: () {

                      }
                    )
                  ),
                  Container(
                    width: ScreenUtil().setWidth(236),
                    height: ScreenUtil().setHeight(80),
                    decoration: BoxDecoration(borderRadius: BorderRadius.only(topRight: Radius.circular(ScreenUtil().setHeight(2)),bottomRight: Radius.circular(ScreenUtil().setHeight(2)))),
                    child:RaisedButton (
                      child: Text('加入购物车'),
                      color: Color.fromRGBO(237,23,76,1),
                      textColor: Colors.white,
                      onPressed: () {
                        
                      }
                    )
                  )
                ]
              ),
            ),
            flex: 1,
          )
        ]
      ),
    );
  }
}